<template>
  <page-wrap :showTop="false" back hide-tab bgColor="#F9F9F9" title="定制简历">
    <view class="analysis">
      <view class="header">
        <image :src="loadingImg" class="loading-img"></image>
        <view>此过程可能耗时较长，请耐心等待</view>
      </view>
      <view class="steps">
        <template v-for="(item, index) in stepList">
        <view class="step-item" v-if="index <= step" :key="index" :class="{ active: index === step }">
          <view class="icon" :class="item.icon"></view>
          <view class="content">
            <view class="title">{{ item.title }}</view>
            <view class="description">{{ item.description }}</view>
          </view>
          <view class="status">
            <view class="icon checked" v-if="item.status == 'completed'"></view>
            <view class="loading" v-else></view>
          </view>
        </view>
        </template>
      </view>
    </view>
    <button class="terminate-button" @click="terminateProcess">终止流程</button>
    <u-modal v-model="showModal" :content="content" show-cancel-button @confirm="handleStopProcess"></u-modal>
  </page-wrap>
</template>
<script>
import { getTaskProgress } from '../api/resumeApi.js';
export default {
  data() {
    return {
      type: '',
      taskId: '',
      step: 0,
      stepList: [
        {
          title: '职位分析',
          description: '解析职位要求，把控职位关键词',
          status: 'loading',
          icon: 'icon-job-anlysis',
        },
        {
          title: '信息解析',
          description: '深度解读您所提供的信息',
          status: 'loading',
          icon: 'icon-msg-analysis',
        },
        {
          title: '简历生成',
          description: '结合全部信息，生成高质量简历',
          status: 'loading',
          icon: 'icon-create-resume',
        }
      ],
      content: '终止后，将不会保存本次流程所产生的数据，是否仍要终止？',
      showModal: false,
      timer: null,
      startTime: 0, // 初始开始请求时间
      resumeData: null,
      loadingImg: this.$imgBaseSelf + "resume/analysis-loading.png"
    };
  },
  onLoad(opt) {
    this.taskId = opt.taskId;
    this.type = opt.type;
  },
  mounted() {
    this.startTime = new Date().getTime();
    this.getResumeTime();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    terminateProcess() {
      this.showModal = true;
    },
    handleStopProcess() {
      this.showModal = false;
      clearTimeout(this.timer);
      uni.navigateBack();
    },
    getResumeTime() {
      clearTimeout(this.timer); // 清除定时器
      // 超过30分钟则停止轮询
      if (new Date().getTime() - this.startTime > 30 * 1000 * 60) {
        clearTimeout(this.timer);
        uni.showToast({ icon: 'none', title: '服务器繁忙，请稍后重试' });
        return;
      }
      // 3s一次, 轮询中
      this.timer = setTimeout(() => {
        this.getResume(); // 调用轮询
      }, 3000);
    },
    getResume() {
      const params = {
        taskId: this.taskId,
      };
      getTaskProgress(params)
        .then((res) => {
          if (res && res.data) {
            if (res.data.result.status == 0) {
              uni.showToast({ icon: 'none', title: res.status_desc });
              return
            }
            let step = res.data.result.step;
            if (step == 20) {
              this.stepList[0].status = 'completed';
              this.step = 1;
            } else if (step == 30) {
              this.stepList[1].status = 'completed';
              this.step = 2;
            } else if (step == 100) {
              this.stepList[2].status = 'completed';
            }
            if (step == 100) {
              clearTimeout(this.timer);
              if (this.type == 'chat') {
                uni.redirectTo({
                    url: '/pagesSub/public/customizedResume/resultChat?taskId=' + this.taskId
                  });
              } else {
                  uni.redirectTo({
                    url: '/pagesSub/public/customizedResume/result?taskId=' + this.taskId
                  });
              };
            } else {
              this.getResumeTime();
            }
          } else {
            uni.showToast({ icon: 'none', title: res.data.status_desc });
          }
        })
        .catch((err) => {
          // 请求错误,也继续轮询
          this.getResumeTime();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.analysis {
  flex-grow: 1;
  background-image: url($img-base + "resume/bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.header {
  margin-top: 238rpx;
  margin-bottom: 66rpx;
  text-align: center;

  .loading-img {
    margin: 0 auto;
    width: 344rpx;
    height: 344rpx;
  }
}

.loading-icon {
  width: 80px;
  height: 80px;
}

.loading-text {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}

.loading-message {
  font-size: 14px;
  color: #777;
  margin-bottom: 20px;
}

.steps {
  width: 100%;
  padding: 0 32rpx;
}

.step-item {
  display: flex;
  align-items: center;
  padding: 40rpx 26rpx;
  border-radius: 24rpx;
  margin-bottom: 10px;
  background-color: #ffffff;
  box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.05);

  .icon {
    width: 88rpx;
    height: 88rpx;
  }

  .icon-job-anlysis {
    background-image: url($img-base + "resume/job-anlysis.png");
  }

  .icon-msg-analysis {
    background-image: url($img-base + "resume/msg-analysis.png");
  }

  .icon-create-resume {
    background-image: url($img-base + "resume/create-resume.png");
  }

  .content {
    flex-grow: 1;
    margin-left: 22rpx;
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #222222;
  }

  .description {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #555555;
  }

  .loading {
    width: 36rpx;
    height: 38rpx;
    background-image: url($img-base + "resume/loading.png");
    background-size: 100% 100%;
    animation: loading 1.5s linear infinite;
  }

  .status {
    margin-right: 16rpx;
  }

  .checked {
    width: 36rpx;
    height: 38rpx;
    background-image: url($img-base + "resume/success.png");
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.terminate-button {
  position: fixed;
  left: 104rpx;
  bottom: calc(32rpx + constant(safe-area-inset-bottom));
  bottom: calc(32rpx + env(safe-area-inset-bottom));
  width: 542rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin-top: 30px;
  border: 1px solid #F04646;
  border-radius: 44rpx;
  background-color: transparent;
  color: #F04646;
  font-size: 16px;
  text-align: center;
}
</style>